import React from 'react'
import styles from "../../css/AddCuiji.module.css";
import Config from "../../Config";

const SelectorInline = ({ name, list ,getOption,type }) => {

    return (
      <div className={styles['cuiji_item']}>
        <div className={styles['cuiji_item_1']}>
          <div className={styles['cuiji_item_key']}>
            {name}
          </div>
          <div className={styles['cuiji_item_value']}>
            <Selector list={list} type={type} getOption={getOption} name={name} />
          </div>
        </div>
      </div>
    )
  }
  class Selector extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        selectedIndex: 0
      }
    }
    select(index,value) {
      this.setState({
        selectedIndex: index
      })
      const item = {}
      item[this.props.type]  = {
        name:value,
        index:index
      }
      if(this.props.getOption){
        this.props.getOption(item)
      }
    }
    render() {
      const { list } = this.props
      const { selectedIndex } = this.state
      return (
        <div className={styles['selector_wrapper']}>
          {
            list.map((item, index) => {
              return (<div
                key={item.value}
                onClick={() => { this.select(index,item.value) }}
                className={styles['selector_item']}
                style={{
                  background: selectedIndex === index ? Config.BaseColor : '',
                  marginLeft: index % 3 === 0 ? '0' : ''
                }}
              >
                {item.value}
              </div>)
            })
          }
  
        </div>
      )
    }
  }

  export default SelectorInline